<template>
  <div>
    <div>
      <!-- 问题信息表单 -->
      <FormPanel ref="formPanel" :list="formList" formType="add" labelWidth="100" :isSubmitBtn="false" @formChange="formChangeHandle" />
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
      <el-button @click="closeDrawer(false)">取 消</el-button>
      <el-button type="primary" @click="commit">提 交</el-button>
    </div>

    <!-- 弹框 -->
    <BaseDialog title="答案选择" :modal="false" :visible.sync="dialogVisible" width="80%">
      <answerGroupSelect @fatherReq="req" @fatherGoBack="goBack" />
    </BaseDialog>
  </div>
</template>

<script>
import { getQuestionnaireEditInfo, addQuestionnaire, editQuestionnaire } from '@/api/customerRepair/visitRules/questionnaireMake2';
import { dictionary } from '@/utils/dictMixin';
import answerGroupSelect from '../components/answerGroupSelect';

export default {
  name: 'ProblemPanel',
  components: {
    answerGroupSelect
  },
  mixins: [dictionary],
  props: {
    questionId: String,
    type: String,
    recordVersion: String
  },
  data() {
    this.BaseTable = null;
    return {
      formList: this.createFormList(), // 问卷表单
      dialogVisible: false, // 是否显示dia
      answerGroupId: '' // 答案组ID
    };
  },
  computed: {},
  created() {
    this.getQuestionnaById();
  },
  methods: {
    async getQuestionnaById() {
      if (this.questionId && this.questionId != '') {
        let param = { questionId: this.questionId };
        const res = await getQuestionnaireEditInfo(param);
        if (res.resultCode == 200) {
          this.answerGroupId = res.data.answerGroupId;
          this.formList.forEach(x => (x.initialValue = res.data[x.fieldName]));
        } else {
          this.$message.error('获取问卷信息失败');
          return;
        }
      }
    },
    changeQuestionType(val) {
      if (val === 15711003) {
        this.answerGroupId = '';
        this.formList[5].initialValue = '';
        this.formList[5].disabled = true;
      }
    },
    // 问卷表单列
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '问题名称',
          fieldName: 'questionName',
          disabled: this.type == 'edit',
          rules: [{ required: true, message: '请填写问题名称', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '问题内容',
          fieldName: 'questionContent',
          disabled: this.type == 'edit',
          rules: [{ required: true, message: '请填写问题内容', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '问题类型',
          fieldName: 'questionType',
          itemList: this.createDictList('1571'),
          rules: [{ required: true, message: '请选择问题类型', trigger: 'blur' }],
          change: function(val) {
            this.changeQuestionType(val);
          }
        },
        {
          type: 'SELECT',
          label: '是否必填',
          fieldName: 'isMustFilled',
          itemList: this.createDictList('1004'),
          rules: [{ required: true, message: '请选择是否必填', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '是否启用',
          fieldName: 'isValid',
          itemList: this.createDictList('1004'),
          rules: [{ required: true, message: '请选择是否启用', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '答案名称',
          fieldName: 'answerGroupName',
          placeholder: '请选择答案',
          unitRender: () => {
            return <el-button slot="append" icon="el-icon-search" onClick={this.answerSelect}></el-button>;
          }
        }
      ];
    },
    answerSelect() {
      this.dialogVisible = true;
    },
    // 关闭drawer
    closeDrawer(refresh) {
      if (refresh) {
        this.$emit('changeHandle', { dataSources: 10451001 });
      }
      this.$emit('close', false);
    },
    // 点击提交
    commit() {
      // 调用表单验证
      this.$refs.formPanel.SUBMIT_FORM();
    },
    // 表单验证回调，传回表单参数
    formChangeHandle(row) {
      if (this.type == 'add') {
        row.answerGroupId = this.answerGroupId;
        // debugger;
        addQuestionnaire(row).then(res => {
          if (res.resultCode === 200) {
            this.$message.success('保存成功');
            this.closeDrawer(true);
          } else {
            this.$message.error('保存失败');
          }
        });
      } else {
        row.answerGroupId = this.answerGroupId;
        row.questionId = this.questionId;
        row.recordVersion = this.recordVersion;
        editQuestionnaire(row).then(res => {
          if (res.resultCode === 200) {
            this.$message.success('保存成功');
            this.closeDrawer(true);
          } else {
            this.$message.error('保存失败');
          }
        });
      }
    },
    goBack() {
      this.dialogVisible = false;
    },
    // 确定选择答案
    req(val) {
      this.answerGroupId = val.answerGroupId;
      this.formList[5].initialValue = val.answerGroupName;
      this.goBack();
    }
  }
};
</script>
<style scoped>
.cover-container {
  width: 1100px !important;
}
</style>
